<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<link href="./resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="./resources/bootstrap-table/css/bootstrap-table.min.css" rel="stylesheet">

<script src="./resources/jquery/jquery-2.1.4.min.js"></script>
<script src="./resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./resources/bootstrap-table/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="./resources/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>

<script type="text/javascript" src="./resources/layer/layer.js"></script>
<script type="text/javascript">
$(function(){
	var $table=$('#table');
	$table.bootstrapTable({
	    columns: [{
            field: 'state',
            checkbox: true,
            align: 'center',
            valign: 'middle'
        },{
	        field: 'id',
	        title: 'Item ID'
	    }, {
	        field: 'name',
	        title: 'Item Name'
	    }, {
	        field: 'price',
	        title: 'Item Price'
	    },{
            field: 'operate',
            title: '操作',
            align: 'center',
            formatter: function(value, row, index){
            	 return "<a class='like' href='javascript:void(0)' title='Like'><i class='glyphicon glyphicon-heart'></i></a>"+
            	        "<a class='remove' href='javascript:void(0)' title='Remove'><i class='glyphicon glyphicon-remove'></i></a>"
            },
            events:{
            	'click .like': function (e, value, row, index) {
                    alert('You click like action, row: ' + JSON.stringify(row));
                },
                'click .remove': function (e, value, row, index) {
                    $table.bootstrapTable('remove', {
                        field: 'id',
                        values: [row.id]
                    });
                    layer.alert('酷毙了', {icon: 1});
                    layer.tab({
                    	  area: ['600px', '300px'],
                    	  tab: [{
                    	    title: 'TAB1', 
                    	    content: '内容1'
                    	  }, {
                    	    title: 'TAB2', 
                    	    content: '内容2'
                    	  }, {
                    	    title: 'TAB3', 
                    	    content: '内容3'
                    	  }]
                    	});        
                }
            }
        }],
	    data: [{
	        id: 1,
	        state:false,
	        name: 'Item 1',
	        price: '$1'
	    }, {
	        id: 2,
	        state:false,
	        name: 'Item 2',
	        price: '$2'
	    }, {
	        id: 2,
	        state:false,
	        name: 'Item 2',
	        price: '$2'
	    }, {
	        id: 2,
	        state:false,
	        name: 'Item 2',
	        price: '$2'
	    }, {
	        id: 2,
	        state:false,
	        name: 'Item 2',
	        price: '$2'
	    }]
	});
});	
</script>
</head>
<body>
	<div class="container-fluid">
		<div id="toolbar">
	        <button id="add" class="btn btn-info">
	            <i class="glyphicon glyphicon-remove"></i>添加
	        </button>
	    </div>
	    <table id="table"  
	           data-toolbar="#toolbar" 
	           data-show-refresh="true"
	           data-search="true"
               data-show-toggle="true"
               data-show-columns="true"
               data-minimum-count-columns="2"
               data-show-export="true"
               data-id-field="id"
	           data-page-list="[10, 25, 50, 100, ALL]" 
	           data-show-export="true"
           	   data-pagination="true"
           	   data-show-footer="false"
           	   data-click-to-select="true"
           	   data-single-select="false"
           	   data-striped="true"
           	   data-method="get"
           	   data-search-on-enter-key="true"
	           data-show-pagination-switch="true">
	     </table>
	  </div>
	  <div id="id" style="width: 100px;height: 80px"></div>
</body>
</html>